import React, { memo } from "react";

import GHThemeHeaderNormal from "@/components/theme-header-normal"
import { useSelector, shallowEqual } from "react-redux";
import GHArtistItem from './component/atris-item.js'
import GHAlphalist from './component/alpha-list'
import {
  ArtistListWrapper
} from './style';
export default memo(function GHAtristList() {
  const { currentType, artistList } = useSelector(state => {
    return {
      currentType: state.getIn(['artist', 'currentType']),
      artistList: state.getIn(["artist", "artistList"])
    }
  }, shallowEqual);
  return (
    <ArtistListWrapper>
      <GHThemeHeaderNormal title={currentType.name} />
      <GHAlphalist />
      <div className="artist-list">
        {
          artistList.map((item, index) => {
            return <GHArtistItem key={item.id} index={index} info={item} />
          })
        }
      </div>
    </ArtistListWrapper>
  )
})